<template>
  <div class="flow-palette">
    <div class="scroll">
      <n-collapse style="color: black !important;">
        <n-collapse-item v-for="t in NodeGroup" :key="t.id" :title="t.title" :name="t.id"
                         style="color: black !important;">
          <palette-node v-for="item in t.items" :key="item.id" :data="item"/>
        </n-collapse-item>
      </n-collapse>
    </div>
    <div class="footer">
      <el-button class="mini" icon="el-icon-arrow-up" @click="closeAll"/>
      <el-button class="mini" icon="el-icon-arrow-down" @click="openAll"/>
    </div>
  </div>
</template>

<script setup lang="ts">
import PaletteNode from './components/palette-node.vue'
import {computed, onMounted, ref, watch} from "vue";
import {useStore} from 'vuex'

import {useFlowStore} from "@/store/modules/flow/flowStore";

// 获取 Vuex 存储实例
const store = useStore()

const FlowStore = useFlowStore()
const NodeGroup = computed(() => {
  return FlowStore.NodeGroup
})
const search = ref('')

// 组件挂载时获取类型数据
onMounted(() => {
})

// 方法
const openAll = () => {
  //activeTypeIds.value = NodeGroup.value.map((g: any) => g.id)
}

const closeAll = () => {
  //activeTypeIds.value = []
}
</script>

<style lang="less">
@import "../flow/styles/index.less";

.n-collapse-item__header-main {
  color: black !important;
}

.n-collapse-item-arrow {
  color: black !important;
}

.flow-palette {
  .el-collapse-item__header {
    padding-left: 6px;
    background-color: @palette-header-background;
  }

  .el-collapse-item__content {
    padding-bottom: 0;
  }
}
</style>

<style lang="less" scoped>
@import "../flow/styles/index.less";

.flow-palette {
  .scroll {
    position: absolute;
    top: 35px;
    right: 0;
    bottom: 25px;
    left: 0;
    padding: 0;
    overflow-y: auto;
    box-sizing: border-box;
  }

  .footer {
    border-top: 1px solid @primary-border-color;
    background: @background-color;
    text-align: right;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 25px;
    line-height: 23px;
    padding: 0 10px;
    user-select: none;
  }

  .mini {
    padding: 2px 2px;
    margin-left: 0;
  }
}
</style>
